<template>
    <div class="goods-category">
        <search-form :searchArray="searchArray" :searchObj="searchObj" @search="getList">
            <el-button class="btn search mL20" @click="add">新增</el-button>
        </search-form>
        <elTable :formData="formData" @getList="getList">
                <el-table-column prop="name" label="优惠劵名称" align="center"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" align="center">
                    <template slot-scope="scope">
                        {{$normalTime(scope.row.createTime)}}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="优惠劵名称" align="center"></el-table-column>
                <el-table-column prop="name" label="有效时间" align="center">
                    <template slot-scope="scope">
                        {{scope.row.startTime && $normalTime(scope.row.startTime)+ '-' || ''}}{{scope.row.endTime && $normalTime(scope.row.endTime)}}
                    </template>
                </el-table-column>
                <el-table-column prop="typeMessage" label="优惠劵类型" align="center"></el-table-column>
                <el-table-column prop="statusMessage" label="状态" align="center"></el-table-column>
                <el-table-column prop="action" label="操作" align="center">
                    <template slot-scope="">
                        <el-button type="text"  @click="editer(scope.row)">编辑</el-button>
                        <el-button type="text"  @click="deletes(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
        </elTable>
        <dialogs
        :visible="visible"
        :title="`${isEditer ? '编辑' : '新增'}分类`"
        width="500px"
        @confirm="save"
        >
            <el-form v-model="formCategory" label-width="100px">
                <el-form-item prop="name" label="分类名称">
                    <el-input v-model.trim="formCategory.name" placeholder="请输入分类名称"></el-input>
                </el-form-item>
                <el-form-item prop="store" label="上级分类">
                    <el-select v-model="formCategory.parentCategory.id" style="width: 100%;">
                        <el-option  v-for="(item, i) in categoryList" :label="item.name" :value="item.id" :key="i"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </dialogs>
    </div>
</template>
<script>
export default {
    name: 'goodsCategory',
    data () {
        return {
            isEditer: false,
            visible: {
                show: false
            },
            searchArray: [
                {
                    type: 'input',
                    placeholder: '请输入分类名称',
                    value: '',
                    label: '分类名称',
                    key: 'name'
                },
                {
                    type: "select",
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '一级分类',
                    key: 'parentId',
                    list: [
                    ]
                },
            ],
            searchObj: {
                name: '',
                parentId: ''
            },
            formData: {
                currentPage: 1,
                pageSize: 10,
                data: [
                ],
                total: 0
            },
            formCategory: {
                name: '',
                parentCategory: {
                    id: ''
                }
            },
            categoryList: []
        }
    },
    created () {
        this.getList()
    },
    methods: {
        getList(status = true) {
            if (!status) this.formData.currentPage = 1
            const {formData: {currentPage, pageSize}, searchObj} = this
            let param = {}
            param = {
                currentPage,
                pageSize
            }
            for ( let k in searchObj) {
                if (searchObj[k] !== '') {
                    param[k] = searchObj[k]
                }
            }
            this.$loading(true)
            this.$api.goods.getCategoryList(param).then(r => {
                this.formData.data = r.data && r.data.list || []
                this.formData.total = r.data.total || 0
                console.log(this.formData)
            }).finally(() => {
                this.$loading(false)
            })
        },
        add () {
            this.getFirstCategory()
            this.isEditer = false
            this.visible.show = true
        },
        getFirstCategory () {
            let param = {
                currentPage: 1,
                pageSize: 100
            }
            this.$api.goods.getCategoryList(param).then(r => {
                this.categoryList = r.data && r.data.list || []
            }).finally(() => {
            })
        },
        save () {
             let api = !this.isEditer  ? 'addCategory' : 'putUpdateCategory'
             this.$loading(true)
             this.$api.goods[api](this.formCategory).then(r => {
                 this.$message.success('删除成功')
             }).finally(() => {
                 this.$loading(false)
             })
        },
        deletes (item) {
            this.$confirm(`您确定要删除分类么?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    let param = {}
                    param = {
                        id: item.id,
                        isDelete:  -1
                    }
                    this.$api.goods.deleteCategory(param).then(r => {
                        this.getList()
                    })
                }).catch(() => {
            })
        },
        editer (item) {
            this.formCategory = item
            this.isEditer = true
            this.visible.show = true
        }
    },
    watch: {
        'visible.show' (val) {
            if (!val) {
                this.formCategory = {
                    name: '',
                    parentCategory: {
                        id: ''
                    }
                }
            }
        }
    }
}
</script>